<template>
  <div class="header_margin-top">
    <Header/>
    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel new">The activity news</h2>
        <h1 class="pos-abs">活动新闻</h1>
        <h3 class="pos-abs">用最少的时间，练出最好的效果</h3>
        <div class="catage clearfix pos-abs">您所有在位置：首页 > 活动新闻 > 列表</div>
      </div>

      <ul class="new-list clearfix">
        <li
          class="clearfix pos-rel"
          v-for="site in newList"
          :key="site.id"
          v-on:click="li_click(site.id)"
        >
          <p class="time">{{site.time}}</p>
          <p class="tit text-wid">{{site.title}}</p>
          <p class="con">{{site.content}}</p>
          <img :src="site.imgUrl" class="img">
          <div class="pos-abs clearfix detail">
            <p class="time">{{site.time}}</p>
            <p class="tit text-wid">{{site.title}}</p>
            <p class="more rad5">查看详情</p>
          </div>
        </li>
      </ul>

      <div class="clear hei20"></div>
      <div class="pagesize clearfix">
        <span class="pre"><<</span>
        <span class="pre"><</span>
        <span>1</span>
        <span class="pre">></span>
        <span class="pre">>></span>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from "./Footer.vue";
import _http from "../httpService";

function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  let o = {
    "M+": date.getMonth() + 1,
    "d+": date.getDate(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + "";
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? str : padLeftZero(str)
      );
    }
  }
  return fmt;
}

function padLeftZero(str) {
  return ("00" + str).substr(str.length);
}

function ellipsis(value) {
  let max = 80;
  if (!value) return "";
  if (value.length > max) {
    return value.slice(0, max) + "...";
  }
  return value;
}

export default {
  name: "News",
  props: {
    msg: String
  },
  data() {
    return {
      newList: null
    };
  },
  components: {
    Header,
    Footer
  },
  mounted() {
    _http
      .get("/content/selectListByEnterpriseIdAndCatalogCode?catalogCode=news")
      .then(response => {
        this.newList = [];
        response.data.forEach(element => {
          this.newList.push({
            id: element.id,
            time: formatDate(new Date(element.createTime), "yyyy-MM-dd"),
            title: element.title,
            content: ellipsis(element.summary),
            imgUrl: element.previewImage
          });
        });
      })
      .catch(error => console.log(error))
      .finally(() => (this.loading = false));
  },
  methods: {
    li_click: function(id) {
      console.log(id);
      this.$router.push({path:'/detail/' + id});
    }
  }
};
</script>

<style>
body {
  background: #f4f4f4 !important
}
.header_margin-top {
  margin: 0px !important;
  padding-top: 120px !important;
}
.new-list li {
  float: left;
  width: 350px;
  height: 440px;
  padding: 20px;
  margin: 0px 70px 50px 0px;
  border: 1px solid #ddd;
  background: #fff;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.new-list li:nth-child(3),
.new-list li:nth-child(6) {
  margin-right: 0px;
}
.new-list li img {
  width: 100%;
  height: 200px;
  margin-top: 20px;
}
.new-list li > .time {
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  color: #444;
  text-align: left;
  font: bold 20px/42px "Microsoft YaHei";
}
.new-list li > .tit {
  font-size: 14px;
  line-height: 30px;
  text-align: left;
  font-weight: bold;
}
.new-list li > .con {
  font-size: 12px;
  color: #444;
  line-height: 24px;
  text-align: left;
}
.new-list .detail {
  top: auto;
  bottom: -200%;
  left: 0px;
  z-index: 8;
  width: 100%;
  height: 440px;
  text-align: center;
  background: rgba(233, 124, 76, 0.8);
  padding: 160px 20px;
  color: #fff;
  line-height: 30px;
}
.new-list .detail > .time {
  font-size: 18px;
  font-weight: bold;
}
.new-list .detail > .tit {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0px;
}
.new-list .detail > .more {
  display: inline-block;
  background: #fff;
  padding: 0px 15px;
  line-height: 30px;
  color: #e97c4c;
  font-weight: bold;
}
.new-list li:hover .detail {
  bottom: 0px;
  transition: 0.8s;
}
.pagesize {
  display: block;
  width: 100%;
  padding: 20px 0px;
  text-align: center;
}
.pagesize span {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 5px;
  text-align: center;
  font: normal 16px/35px "Arial";
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background: #f38656;
  color: #fff;
  cursor: pointer;
}
.pagesize span.pre {
  background: #544441;
}
.public-title h2.new:before {
  width: 430px;
}
</stylescoped>
